<template>
  <div class="app-container">
    <el-row :gutter="24">
      <=====-----TREE-----=====>
      <el-col :span="table" class="bg">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            
            <el-row>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <=====----------=====>

              <el-form-item>
                <el-button type="primary" @click="onQuery" size="small">查询</el-button>
              </el-form-item>
            </el-form>
            </el-row>
            <el-row>
              <el-button type="primary" size="small" icon="el-icon-plus"  @click="showDialog(1)">新增</el-button>
              <el-button type="success" size="small" icon="el-icon-edit">修改</el-button>
              <el-button type="info" size="small" icon="el-icon-delete"  @click="itemBatch_DEL">删除</el-button>
              <el-button type="warning" size="small" icon="el-icon-bottom">导入</el-button>
              <el-button type="danger" size="small" icon="el-icon-top">导出</el-button>
            </el-row>

          </el-form>
        <el-table :data="list" style="width: 100%"  ref="multipleTable" tooltip-effect="dark" @selection-change="tableSelect">
        <!-- <el-table-column prop="是否展示" label="display" width="120">
        <template slot-scope="scope">
            <el-tag v-if="scope.row.display===1" type="success">是</el-tag>
            <el-tag v-if="scope.row.display===0" type="info">否</el-tag>
        </template>
        </el-table-column> -->
        <el-table-column type="selection" width="50"> </el-table-column>
        <!!!!!----------!!!!!>

        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
              <el-button size="mini" @click="editItem(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-col>

      <el-dialog
        title="新增/编辑"
        :visible.sync="dialogVisible"
        :before-close="dialogClose"
        width="75%">
     
        <el-form ref="fromView" :inline="true" :model="fromView" :rules="formRules" status-icon class="demo-form-inline" label-width="100px" label-position="right">
            <el-row type="flex" justify="start">
                <el-col :span="7">
                  <el-form-item label="用户账号" prop="userName">
                    <el-input v-model="fromView.userName" placeholder="用户账号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="fromView.nickName" placeholder="用户昵称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="fromView.email" placeholder="邮箱"></el-input>
                  </el-form-item>
                </el-col>
                <!--占位-->
                <!-- <el-col :span="2"></el-col> -->
            </el-row>

            <el-row type="flex" justify="start">
                <el-col :span="7">
                  <el-form-item label="手机号码" prop="phonenumber">
                    <el-input v-model="fromView.phonenumber" placeholder="手机号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="性别" prop="sex">
                    <el-select v-model="fromView.sex" placeholder="请选择性别">
                      <el-option label="男" value="0"></el-option>
                      <el-option label="女" value="1"></el-option>
                    </el-select>
                    <!-- <el-input v-model="formInline.sex" placeholder="性别"></el-input> -->
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="密码" prop="pasword">
                    <el-input v-model="fromView.pasword" placeholder="密码"></el-input>
                  </el-form-item>
                </el-col>
                <!--占位-->
                <!-- <el-col :span="5"></el-col> -->
            </el-row>


            <el-row type="flex" justify="start">
                <el-col :span="7">
                  <el-form-item label="状态">
                    <template>
                    <div>
                      <el-radio-group v-model="fromView.status" size="small">
                        <el-radio-button label="0">正常</el-radio-button>
                        <el-radio-button label="1">禁用</el-radio-button>
                      </el-radio-group>
                    </div>
                  </template>
                  </el-form-item>

                </el-col>
                <el-col :span="10">
                  <el-form-item label="部门">
                    <template>
                      <div class="block">
                        <el-cascader
                          v-model="fromView.dept_id"
                          :options="deptTree"
                          :show-all-levels="false"
                          :props="{ label: 'deptName', value: 'deptId', emitPath: false }"
                           ></el-cascader>
                      </div>
                  </template>
                  </el-form-item>

                </el-col>
                <!--占位-->
                <!-- <el-col :span="5"></el-col> -->
            </el-row>


            <el-row type="flex" justify="start">
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input
                      :rows="3"
                      type="textarea"
                      placeholder="请输入内容"
                      v-model="fromView.remark"
                      maxlength="200"
                      show-word-limit
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!--占位-->
                <!-- <el-col :span="5"></el-col> -->
            </el-row>
            <div style="margin: 5px 0;"></div>
            <el-row type="flex" justify="start">
              <el-col :span="2"></el-col>
              <el-col :span="19">
                <el-form-item>
                  <el-button type="primary" @click="onSubmitAdd('ruleForm')">{{buttonText.editSubmit}}</el-button>
                  <el-button @click="dialogClose('ruleForm')">取消</el-button>
                </el-form-item>
              </el-col>
           </el-row>
        </el-form>
      </el-dialog>


    </el-row>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
// 混流js数据源存放在其中
import mixin from './mixin'

export default {
    name: '_____',
    mixins: [mixin],
    data() {
        return {
        }
    }
}

</script>

<style>

</style>